<template>
  <div class="container" :style="{height:containerHeight}" @scroll="handleScroll" ref="container">
    <!-- 数据列表 -->
    <div class="list" :style="{top: listTop}">
      <!-- 列表项 -->
      <div v-for="item in showData" :key="item.id" :style="{height: size + 'px'}">
        {{item.content}}
      </div>
      <!-- 用于撑开高度的元素 -->
      <div class="bar" :style="{height:barHeight}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DomeList"
}
</script>
<script setup>
import {computed, ref} from "vue";

const props = defineProps({
  // 要渲染的数据
  items: {
    type: Array,
    required:true
  },
  // 每条渲染节点的高度
  size:{
    type: Number,
    required:true
  },
  // 每次渲染DOM节点个数
  shownumber:{
    type: Number,
    required:true
  }
})

const start = ref(0) // 要显示数据的下标
const end = ref(props.shownumber) // 要显示数据的结束的下标
// 最终刷选出要展示的数据
const showData = computed(()=> props.items.slice(start.value,end.value))
// 容器的高度
const containerHeight = computed(()=>props.size * props.shownumber - 100 + 'px' )
// 撑开容器内部高度的元素的高度
const barHeight = computed(()=> props.size * props.items.length + 'px' )
// 列表上滚动改变top的值
const listTop = computed(()=>props.size * start.value + 'px' )
const container = ref(null)
// 容器的滚动事件
const handleScroll = ()=>{
  // 获取容器顶部滚动的尺寸
  const scrollTop = container.value.scrollTop
  console.log(scrollTop)
  // 计算移除的数据条数，用计算的结果作为获取数据的起始和结束下标
  // 起始的下标就是卷去的数据条数，向下取整
  start.value = Math.floor(scrollTop / props.size)
  // 结素时下标就是起始的下标加上要展示的数据条数
  end.value = start.value + props.shownumber

}
</script>

<style scoped>
.container{
  overflow-y: scroll;
  background: #535bf2;
  font-size: 20px;
  line-height: 60px;
  width: 500px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.list{
  position: absolute;
  top: 0;
  width: 100%;
}
</style>
